<template>
  <section>
    <topic-table :tableColumn="tableColumn" :tableData="tableData" :total="total" @actionClick="actionClick" :buttonGroup="buttonGroup" :pageSize="pageSize" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
    </topic-table>

    <news-template :title="'发布消息'" :dialogVisible="dialogVisible" @changeVisible="changeVisible" @submitForm="submitForm" :form="form" :tip="tip"></news-template>
  </section>
</template>

<script>
  import utilMixin from '@views/mixin/systemUtil'
  import TopicTable from '@components/Table'
  import NewsTemplate from '@views/device/components/NewsTemplate'
  import { Vue, Component, Watch } from 'vue-property-decorator'

  @Component({
    components: {
      TopicTable,
      NewsTemplate
    },
    mixins: [utilMixin]
  })
  export default class DeviceTopicList extends Vue {
    data() {
      return {
        id: -1,
        dialogVisible: false, //form表单是否显示
        form: {}, //form表单提交对象
        tip: "注意：如果该Topic正在被应用使用，请谨慎操作，以防应用出现异常。", //表单tip
        tableColumn: [ //表格列对象
          { type: "name", name: "设备的Topic", operate: false },
          { type: "type", name: "设备具有的权限", operate: false },
          { type: "total", name: "发布消息数", operate: false }
        ],
        tableData: [], //表格数据
        buttonGroup: [{ name: '发布消息' }] //表格按钮数组
      }
    }
    mounted() {
      this.id = this.$route.params.id;
    }
    changeVisible(val) { //表单关闭回调方法
      this.dialogVisible = val
    }
    actionClick(rowData, index) { //表单按钮组回调方法
      //1发布消息
      switch (index) {
        case 1:
          this.sendTopicClick(rowData)
          break;
      }
    }
    sendTopicClick(rowData) { //发布消息
      console.log(rowData);
      this.dialogVisible = true
    }
    submitForm() { //表单提交方法
      console.dir(this.form)
      this.dialogVisible = false
    }
  }
</script>